<template>
  <el-container class="el-container">
    <el-row class="epd-body">
      <el-row>
        <el-col :span="2" align="left">
          <span style="font-size: 18px;">项目详情</span>
        </el-col>
        <el-divider/>
      </el-row>
      <el-row v-loading="xmxqLoading">
        <el-col :span="7">
          <el-image class="detail-img" :src="eventPubData.image"></el-image>
        </el-col>
        <el-col :span="17" :align="'left'">
          <el-row class="detail-row">
          <span style="font-size: 22px;">
            {{ eventPubData.eventName }}
          </span>
          </el-row>
          <el-row class="detail-row-time">
          <span style="font-size: 16px;">
            时间：{{ eventPubData.startTime }} ~ {{ eventPubData.endTime }}
          </span>
          </el-row>
          <el-row class="detail-row-time">
          <span style="font-size: 16px;">
            场馆：{{ eventPubData.place }}号场馆
          </span>
          </el-row>
          <el-row class="detail-row-time">
          <span style="font-size: 16px;">
            抵挡票价：￥ {{ toDecimal2(eventPubData.lowPrice) }}
          </span>
          </el-row>
          <el-row class="detail-row-time">
          <span style="font-size: 16px;">
            中挡票价：￥ {{ toDecimal2(eventPubData.midPrice) }}
          </span>
          </el-row>
          <el-row class="detail-row-time">
          <span style="font-size: 16px;">
            高挡票价：￥ {{ toDecimal2(eventPubData.highPrice) }}
          </span>
          </el-row>
          <el-row class="detail-row-time">
          <span style="font-size: 16px;" v-if="eventPubData.onSale">
            状态：售票中
          </span>
            <span style="font-size: 16px;" v-if="!eventPubData.onSale">
            状态：暂停售票
          </span>
          </el-row>
          <el-row class="detail-row-time">
          <span style="font-size: 16px;">
            创建时间：{{ eventPubData.createTime }}
          </span>
          </el-row>
        </el-col>
      </el-row>
      <el-row style="margin-top: 50px">
        <el-col :span="2" align="left">
          <span style="font-size: 18px;">项目订单</span>
        </el-col>
        <el-divider/>
      </el-row>
      <el-row>
        <el-col :span="24" align="right">
          <ets-event-pub-order :event-i-d="eventID"/>
        </el-col>
      </el-row>
      <el-row style="margin-top: 50px">
        <el-col :span="2" align="left">
          <span style="font-size: 18px;">数据统计</span>
        </el-col>
        <el-divider/>
      </el-row>
      <el-row v-loading="xszsLoading">
        <el-descriptions direction="vertical" title="销售走势" :column="1" border>
          <el-descriptions-item label="近7天销售走势/张">
            <div id="epdst" style="width: 100%; height: 300px"></div>
          </el-descriptions-item>
        </el-descriptions>
      </el-row>
      <el-row style="margin-top: 20px" v-loading="xselLoading">
        <el-descriptions direction="vertical" title="销售额" :column="4" border>
          <el-descriptions-item label="总销售额/元">
            <el-row>
              <el-col align="center">
                <span style="font-size: 18px; font-weight: bold">￥ {{ statistics.totalPrice }}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 10px">
              <el-col align="center">
                <el-progress type="circle" color="#ed0b75" :percentage="statistics.totalPriceRate"></el-progress>
              </el-col>
            </el-row>
          </el-descriptions-item>
          <el-descriptions-item label="抵挡票价销售额/元">
            <el-row>
              <el-col align="center">
                <span style="font-size: 18px; font-weight: bold">￥ {{ statistics.lowTotalPrice }}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 10px">
              <el-col align="center">
                <el-progress type="circle" color="#ed0b75" :percentage="statistics.lowTotalPriceRate"></el-progress>
              </el-col>
            </el-row>
          </el-descriptions-item>
          <el-descriptions-item label="中挡票价销售额/元">
            <el-row>
              <el-col align="center">
                <span style="font-size: 18px; font-weight: bold">￥ {{ statistics.midTotalPrice }}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 10px">
              <el-col align="center">
                <el-progress type="circle" color="#ed0b75" :percentage="statistics.midTotalPriceRate"></el-progress>
              </el-col>
            </el-row>
          </el-descriptions-item>
          <el-descriptions-item label="高挡票价销售额/元">
            <el-row>
              <el-col align="center">
                <span style="font-size: 18px; font-weight: bold">￥ {{ statistics.highTotalPrice }}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 10px">
              <el-col align="center">
                <el-progress type="circle" color="#ed0b75" :percentage="statistics.highTotalPriceRate"></el-progress>
              </el-col>
            </el-row>
          </el-descriptions-item>
        </el-descriptions>
      </el-row>
      <el-row style="margin-top: 20px" v-loading="xselLoading">
        <el-descriptions direction="vertical" title="销售量" :column="1" border>
          <el-descriptions-item label="抵挡票价销售量/张">
            <el-row>
              <el-col :span="2">
                {{ statistics.lowSoldCount }}/{{ statistics.lowSeatCount }}
              </el-col>
            </el-row>
            <el-row style="margin-top: 10px; margin-bottom: 5px">
              <el-col :span="10">
                <el-progress :percentage="getRate(statistics.lowSoldCount,statistics.lowSeatCount)" color="#ed0b75"
                             :show-text="false"></el-progress>
              </el-col>
            </el-row>
          </el-descriptions-item>
          <el-descriptions-item label="中挡票价销售量/张">
            <el-row>
              <el-col :span="2">
                {{ statistics.midSoldCount }}/{{ statistics.midSeatCount }}
              </el-col>
            </el-row>
            <el-row style="margin-top: 10px; margin-bottom: 5px">
              <el-col :span="10">
                <el-progress :percentage="getRate(statistics.midSoldCount,statistics.midSeatCount)" color="#ed0b75"
                             :show-text="false"></el-progress>
              </el-col>
            </el-row>
          </el-descriptions-item>
          <el-descriptions-item label="高挡票价销售量/张">
            <el-row>
              <el-col :span="2">
                {{ statistics.highSoldCount }}/{{ statistics.highSeatCount }}
              </el-col>
            </el-row>
            <el-row style="margin-top: 10px; margin-bottom: 5px">
              <el-col :span="10">
                <el-progress :percentage="getRate(statistics.highSoldCount,statistics.highSeatCount)" color="#ed0b75"
                             :show-text="false"></el-progress>
              </el-col>
            </el-row>
          </el-descriptions-item>
        </el-descriptions>
      </el-row>
    </el-row>
  </el-container>
</template>

<script>
export default {
  name: 'EventPubDetail',
  created () {
    this.eventID = this.$route.params.id
    this.getEventPubData()
    this.getXsel()
  },
  mounted () {
    this.getGraph()
  },
  data () {
    return {
      xmxqLoading: false,
      xszsLoading: false,
      xselLoading: false,
      eventID: 0,
      tableData: [
        {
          id: 'id'
        }
      ],
      eventPubData: {},
      statistics: {
        totalPrice: '0.00',
        totalPriceRate: 0,
        lowTotalPrice: '0.00',
        lowTotalPriceRate: 0,
        midTotalPrice: '0.00',
        midTotalPriceRate: 0,
        highTotalPrice: '0.00',
        highTotalPriceRate: 0,
        lowSoldCount: '0',
        midSoldCount: '0',
        highSoldCount: '0',
        lowSeatCount: '0',
        midSeatCount: '0',
        highSeatCount: '0'
      },
      chartData: {
        legendData: ['抵挡票', '中档票', '高档票'],
        xdata: ['2023-11-20', '2023-11-21', '2023-11-22', '2023-11-23', '2023-11-24', '2023-11-25', '2023-11-26', '2023-11-27'],
        series: [
          {
            name: '抵挡票',
            type: 'line',
            stack: 'Total',
            data: [32, 10, 3, 5, 2, 1, 1]
          },
          {
            name: '高档票',
            type: 'line',
            stack: 'Total',
            data: [20, 5, 11, 8, 10, 3, 9]
          },
          {
            name: '中档票',
            type: 'line',
            stack: 'Total',
            data: [42, 26, 25, 17, 8, 7, 15]
          }
        ]
      }
    }
  },
  methods: {
    getEventPubData () {
      let _this = this
      _this.xmxqLoading = true
      this.$axios({
        url: '/api/events/' + this.eventID,
        method: 'get',
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
          'token': _this.getToken()
        }
      }).then((response) => {
        if (response.data.code === 1) {
          _this.eventPubData = response.data.data
          _this.xmxqLoading = false
        } else {
          _this.isTokenExpired(_this, response.data.msg)
          this.err(response.data.msg)
        }
      })
    },
    getXsel () {
      let _this = this
      _this.xselLoading = true
      this.$axios({
        url: '/api/statistics?eventID=' + this.eventID,
        method: 'get',
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
          'token': _this.getToken()
        }
      }).then((response) => {
        if (response.data.code === 1) {
          _this.statistics = response.data.data
          _this.statistics.totalPriceRate = parseFloat(response.data.data.totalPriceRate)
          _this.statistics.lowTotalPriceRate = parseFloat(response.data.data.lowTotalPriceRate)
          _this.statistics.midTotalPriceRate = parseFloat(response.data.data.midTotalPriceRate)
          _this.statistics.highTotalPriceRate = parseFloat(response.data.data.highTotalPriceRate)
          _this.xselLoading = false
        } else {
          _this.isTokenExpired(_this, response.data.msg)
          this.err(response.data.msg)
        }
      })
    },
    getGraph () {
      let _this = this
      _this.xszsLoading = true
      this.$axios({
        url: '/api/statistics/graph?eventID=' + this.eventID,
        method: 'get',
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
          'token': _this.getToken()
        }
      }).then((response) => {
        if (response.data.code === 1) {
          _this.chartData = response.data.data
          _this.epd()
          _this.xszsLoading = false
        } else {
          _this.isTokenExpired(_this, response.data.msg)
          this.err(response.data.msg)
        }
      })
    },
    getRate (fz, fm) {
      if (fm === 0 || fm === '0') {
        return 0
      }
      return fz / fm * 100
    },
    epd () {
      let _this = this
      let usChart = this.$echarts.getInstanceByDom(document.getElementById('epdst'))
      if (usChart == null) {
        usChart = this.$echarts.init(document.getElementById('epdst'))
      }
      usChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          top: '7%',
          bottom: '3%',
          data: _this.chartData.legendData
        },
        grid: {
          top: '25%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: _this.chartData.xdata
        },
        yAxis: {
          type: 'value'
        },
        series: _this.chartData.series
      }
      )
    }
  }
}
</script>

<style scoped>
.el-container {
  width: 80%;
  margin: 0 auto;
}

.epd-body {
  margin-top: 20px;
  width: 100%;
}

.detail-img {
  height: 304px;
  width: 225px;
}

.detail-row {
  margin-bottom: 40px;
}

.detail-row-time {
  margin-bottom: 10px;
  margin-top: 10px;
}
</style>
